<template>
  <div class="login-container">
    <div class="login-wrapper">
      <div class="login-header">
        <!-- <img src="@/assets/taxi-icon.png" alt="Taxi Icon" class="taxi-icon"> -->
        <h1>手拉手</h1>
      </div>
      
      <van-form @submit="onSubmit" class="login-form">
        <van-cell-group inset>
          <van-field
            v-model.trim="cardKey"
            name="cardKey"
            label=""
            placeholder="请输入您的卡密"
            :rules="[{ required: true, message: '请输入卡密' }]"
            left-icon="key-o"
            style="border: 1px solid #DFDFE5;"
          >
          </van-field>
        </van-cell-group>

        <div class="login-actions">
          <van-button 
            round 
            block 
            type="primary" 
            native-type="submit"
            :loading="loading"
          >
            登录
          </van-button>
        </div>

        <van-checkbox 
          v-model="rememberPassword" 
          class="remember-password-checkbox"
        >
          记住卡密
        </van-checkbox>
      </van-form>

      <div class="login-footer">
        <p>{{ currentYear }} - 万兆云端</p>
      </div>
    </div>
  </div>
</template>

<script>
import { loginApi } from '@/api'
import { showNotify, showDialog } from "vant";
import { StorageUtil } from '@/utils/storage'

export default {
  name: 'LoginView',
  data() {
    return {
      cardKey: '',
      loading: false,
      rememberPassword: false,
      currentYear: new Date().getFullYear()
    }
  },
  created() {
    // 检查是否有保存的卡密
    const savedCardKey = localStorage.getItem('rememberedCardKey');
    if (savedCardKey) {
      this.cardKey = savedCardKey;
      this.rememberPassword = true;
    }
    this.loadToastApi()
  },
  methods: {
    loadToastApi() {
      loginApi.queryLatest().then(res => {
        if (res.content || res.title) {
          showDialog({
            title: res.title || undefined,
            message: res.content || undefined,
          }).then(() => {
            // on close
          });
        }
      })
    },
    onSubmit() {
      this.loading = true
      loginApi.login(this.cardKey)
        .then(response => {
          console.log('登录成功!:', response);
          
          // 处理记住卡密逻辑
          if (this.rememberPassword) {
            localStorage.setItem('rememberedCardKey', this.cardKey);
          } else {
            localStorage.removeItem('rememberedCardKey');
          }
          
          // 保存token
          StorageUtil.setToken(response.token)
          // 保存用户信息
          StorageUtil.setUserInfo(response)
          // 保存卡密
          StorageUtil.setCardKey(response.cardKey) 
          
          // 跳转到主页
          this.$router.push({
            name: 'config', 
            query: { cardKey: this.cardKey } 
          })
          
          showNotify({ type: 'success', message: '登录成功' });
        })
        .catch(error => {
          showNotify({ type: 'danger', message: error.retMsg || '登录失败，请检查卡密' })
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
}

.login-wrapper {
  background-color: white;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  padding: 30px;
  width: 65%;
  max-width: 400px;
}

.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.taxi-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 15px;
}

.login-header h1 {
  color: #333;
  font-size: 24px;
  margin: 0;
}

.remember-password-checkbox {
  margin: 15px 0;
  display: flex;
  justify-content: center;
}

.login-actions {
  margin-top: 20px;
}

.login-footer {
  text-align: center;
  margin-top: 20px;
  color: #888;
  font-size: 12px;
}

.van-field__body {
  border: 1px solid #DFDFE5;
}
</style>
